<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打地鼠</title>
    <link rel="stylesheet" href="./game.css">
</head>

<body>
    <audio id="backgroundMusic" src="../打地鼠image/bgm.mp3" style="display:none;"></audio>
    <!--
    开发目的：（修改时）
    1.打击音效 X
    2.背景音乐 X
    3.美化游戏结束弹窗
    4.丰富主页内容，美化主页样式
    5.更换松鼠图片 X
    6.开发新功能（看情况）
 
     -->
    <div id="con">
        <!-- 头部内容：时间 难度 打击数 -->
        <div id="nav">

            <span>
                时间：
                <span id="time">60</span>
            </span>
            <span>
                选择难度：
                <select name="" id="difficult">
                    <option value="2500">容易</option>
                    <option value="2000">普通</option>
                    <option value="1500">困难</option>
                </select>
            </span>
            <span>
                打击数：
                <span id="numHit">0</span>
            </span>
        </div>
        <!-- 核心内容：地鼠的出现和击打 -->
        <div id="mouseFrame">
            <span class="mouse" onclick="sound()"></span>
            <span class="mouse" onclick="sound()"></span>
            <span class="mouse" onclick="sound()"></span>
            <span class="mouse" onclick="sound()"></span>
            <span class="mouse" onclick="sound()"></span>
            <span class="mouse" onclick="sound()"></span>
            <span class="mouse" onclick="sound()"></span>
            <span class="mouse" onclick="sound()"></span>
            <span class="mouse" onclick="sound()"></span>
            <span class="mouse" onclick="sound()"></span>
        </div>
        <!-- 尾部内容：开始游戏和结束游戏 -->
        <div id="end" onclick="end()">结束游戏</div>
        <div id="start" onclick="start()">开始游戏</div>
    </div>
    <!-- 美化游戏结束弹窗 -->
    <div id="cartain">
        <h1>游戏结束</h1>
        <span class="escape1">&times</span>
        <p>
            <span>分数：</span>
            <span class="mark">10</span>
        </p>
        <p>
            <span>用时：</span>
            <span class="usedtime">60</span>
        </p>
    </div>

    <!-- 美化主页 -->
    <div class="kong">
        <div class="box">
            <a href="https://gitee.com/yihyp/shunde-class-2-group-2.git">仓库地址</a>
        </div>
        <div class="Tv">
            <a href="https://www.bilibili.com/video/BV12M4m1U7s3?vd_source=c20e9ea396f91e26e046aa731c43e612">讲解视频</a>
        </div>
        <div class="introduction">
            <a href="./introduce.html">关于我们</a>
        </div>
    
    </div>
    <!-- 地鼠王 -->
     <div id="boss">
        <img src="../打地鼠image/地鼠王.jpg" alt="">
        <p>-1</p>
     </div>
    <script src="./game.js"></script>
</body>

</html>